<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>彩云小译扩展程序选项</title>
  <link href="./css/options.css" rel="stylesheet" />
  <link href="./css/materialize.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="css/spectrum.css">
</head>

<body>
  <div class="container">
    <div class="main">
      <div class="logo-name"><img src="images/logo-name.png"></div>
      <div id="version">0.3.0</div>
      <div class="collection col">
        <div class="switch collection-item">
          <span id="optionsAutoSWT">启动划词翻译</span>
          <label class="secondary-content">
            <input type="checkbox" id="select_translate">
            <span class="lever"></span>
          </label>
        </div>
        <div class="switch collection-item" style="line-height: 48px;">
          <span id="targetBkgColor">译文背景颜色选择</span>
          <label class="secondary-content">
            <input id='cyxy-colorpicker'>
          </label>
        </div>
        <div class="switch collection-item">
          <span id="showDirectly">直接显示划译结果</span>
          <label class="secondary-content">
            <input type="checkbox" id="directTranslation">
            <span class="lever"></span>
          </label>
        </div>
        <div class="switch collection-item">
          <span id="optionsAutoWebTrs">英文、日文网页自动翻译成中文</span>
          <label class="secondary-content">
            <input type="checkbox" id="auto_trs">
            <span class="lever"></span>
          </label>
        </div>
      </div>

      <div class="collection col">
        <!-- <div class="switch collection-item">
                  启用视频翻译
                  <label class="secondary-content">
                    <input type="checkbox" id="video_translate">
                    <span class="lever"></span>
                  </label>
              </div> -->
        <div class="select-item collection-item">
          <span id="defaultTrsDirect">视频翻译默认方向</span>
          <div class="secondary-content">
            <select class="browser-default" id="select_transDirect">
              <option id="transZh2En" selected>中 >> 英</option>
              <option id="transEn2Zh">英 >> 中</option>
              <option id="transJp2Zh">日 >> 中</option>
            </select>
          </div>
        </div>
        <div class="collection-item select-item">
          <span id="defaultSubtype">视频翻译默认显示</span>
          <div class="secondary-content">
            <select class="browser-default" id="select_subType">
              <option selected id="optionBil">双语对照</option>
              <option id="optionSource">只显示原文</option>
              <option id="optionTarget">只显示译文</option>
            </select>
          </div>
        </div>
        <div class="select-item collection-item">
          <span id="defaultAudioApi">语音朗读默认工具</span>
          <div class="secondary-content">
            <select class="browser-default" id="select_audioApi">
              <option id="youdao" selected>朗读工具1</option>
              <option id="baidu">朗读工具2</option>
            </select>
          </div>
        </div>
        <div class="select-item collection-item">
          <span id="readingSpeed">语音朗读语速</span>
          <div class="secondary-content">
              <input type="range" min="1" max="9" value="5" id="audioSpeed">
          </div>         
        </div>
      </div>

      <div class="collection col">
        <a href="https://fanyi.caiyunapp.com/#/?utm_source=extension&utm_medium=options&utm_content=textlink"
          class="collection-item" target="_blank" id="textDocTrs">在线文本翻译、文档翻译</a>
        <a href="https://fanyi.caiyunapp.com/#/mine/doc?utm_source=extension&utm_medium=options&utm_content=textlink"
          class="collection-item" target="_blank" id="UserCenter">个人中心</a>
        <a href="https://fanyi.caiyunapp.com/#/app?utm_source=extension&utm_medium=options&utm_content=textlink"
          class="collection-item" target="_blank" id="xiaoyiApp">彩云小译App</a>
        <a href="https://support.qq.com/products/107129/?utm_source=extension&utm_medium=options&utm_content=textlink"
          class="collection-item" target="_blank" id="feedback">意见反馈</a>
      </div>
    </div>
  </div>

  <div id="update-modal" class="modal">
    <div class="modal-content">
      <h5>版本更新说明</h5>
      <p>1. 网页翻译新增译文模式</p>
      <p>2. 网站数据权限优化</p>
      <p>3. YouTube字幕优化</p>
      <p>4. bug修复，体验优化，欢迎使用</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">OK</a>
    </div>
  </div>

  <script src="jquery.js"></script>
  <script src="options.js"></script>
  <script src="js/materialize.min.js"></script>
  <script src="js/spectrum.js"></script>
</body>

</html>